<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/static/webuploader.css">
    <style>
        #upload-container {
            cursor: pointer;
            border-radius: 15px;
            background: #EEEFFF;
            height: 200px;
        }
    </style>
</head>
<body>
    <div id="upload-container">
        <span>点击或者将文件拖拽上传</span>
    </div>
    <div id="upload-list">
        <!-- 此处存放文件列表，没有文件暂无法测试  -->
    </div>
    <button id="picker" style="display: none;">点击上传文件</button>
    
</body>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script src="../assets/static/webuploader.min.js"></script>
<script type="text/javascript">
    var uploader = WebUploader.create({
        auto: true,   // 配置是否自动上传
        swf: '../src/assets/static/Uploader.swf',
        server: '',  // 后台服务器地址
        dnd: '#upload-container', // 拖动的容器
        pick: '#picker',          // 选择文件的按钮容器
        multiple:true,  // 配置是否可选择多个上传
        chunked: true,  // 配置是否分片上传
        threads: 5,      // 配置可上传的最大进程数
        method: 'POST',  // 上传请求方式
        fileSizeLimit: 1024 * 1024 * 100 * 100,  // 设置文件大小限制 超出限制不允许加入到文件队列
        fileSingleSizeLimit: 1024 * 1024 * 100,  // 设置单个文件的大小限制 超出限制不允许加入到队列
        fileVal: 'upload'  // [默认值：'file'] 设置文件上传域的name
    })
    // 当文件被加入队列以后触发。	
    uploader.on('fileQueued',(file)=>{
        // 在这个方法中可以获取到要上传文件的基础信息
        // 获取文件名称
        console.log(file.name);
        // 获取文件大小
        console.log(file.size);
        // 获取文件后缀
        console.log(file.ext);
        // 将上传的文件的显示到文件列表
        var html = '<div class="upload-item"><span>文件名:'+file.name+'</span class="btn-delete">删除<span></span></div>'
        $('#upload-list').append(html);
    });

    // 上传过程中触发，携带上传进度。
    uploader.on('uploadProgress',(file,percentage)=>{
        // 获取展示的百分比
        console.log(percentage*100+'%');
         // file {File}File对象
        // percentage {Number}上传进度
    })

    // 上传成功
    uploader.on('uploadSuccess',(file,response)=>{
        console.log(file.name + '传输成功');
    });

    // 上传失败
    uploader.on('uploadError',file=>{
        console.log(file.name + 'upload error');
    });

    // 从上传文件队列中移除某个文件
    $("#upload-list").on('click','.upload-item .btn-delete',()=>{
        file_id = $(this).data('file_id');
        uploader.removeFile(file_id,true);
        // 查看剩余的文件
        console.log(uploader.getFiles());
    })

    // 上传完成
    uploader.on('uploadComplete', function(file) {
        console.log(uploader.getFiles());
    });

</script>
</html>